<template>
  <transition name="el-zoom-in-center">
    <div class="jsbos-preview-main">
      <div class="jsbos-common-page-header">
        <el-page-header @back="goBack" content="详情" />
        <div class="options">
          <el-button @click="goBack">取 消</el-button>
        </div>
      </div>
      <el-row
        :gutter="15"
        class="main"
        :style="{ margin: '0 auto', width: '100%' }"
      >
        <el-form
          ref="elForm"
          :model="dataForm"
          size="small"
          label-width="100px"
          label-position="right"
        >
          <template v-if="!loading">
            <el-col :span="24">
              <el-form-item label="名称" prop="fullName">
                <p>{{ dataForm.fullName }}</p>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="编码" prop="enCode">
                <p>{{ dataForm.enCode }}</p>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="模板类型" prop="templateType">
                <p>
                  {{ dataForm.templateType | dynamicText(templateTypeOptions) }}
                </p>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="消息场景" prop="messageSource">
                <p>{{ dataForm.messageSource }}</p>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="排序码" label-width="0px" prop="sortCode">
                <p>{{ dataForm.sortCode }}</p>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="状态" prop="enabledMark">
                <p>{{ dataForm.enabledMark }}</p>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="说明" prop="description">
                <p>{{ dataForm.description }}</p>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label-width="0">
                <div class="jsbos-common-title">
                  <h2></h2>
                </div>
                <el-table :data="dataForm.sendTemplateList" size="mini">
                  <el-table-column
                    type="index"
                    width="50"
                    label="序号"
                    :align="'center'"
                  />
                  <el-table-column prop="messageType" label="消息类型">
                    <template slot-scope="scope">
                      <p>{{ scope.row.messageType }}</p>
                    </template>
                  </el-table-column>
                  <el-table-column prop="templateId" label="消息模板">
                    <template slot-scope="scope">
                      <p>
                        {{
                          scope.row.templateId | dynamicText(templateIdOptions)
                        }}
                      </p>
                    </template>
                  </el-table-column>
                  <el-table-column prop="accountConfigId" label="账号配置">
                    <template slot-scope="scope">
                      <p>
                        {{
                          scope.row.accountConfigId
                            | dynamicText(accountConfigIdOptions)
                        }}
                      </p>
                    </template>
                  </el-table-column>
                  <el-table-column prop="description" label="描述">
                    <template slot-scope="scope">
                      <p>{{ scope.row.description }}</p>
                    </template>
                  </el-table-column>
                  <el-table-column prop="enabledMark" label="状态">
                    <template slot-scope="scope">
                      <p>{{ scope.row.enabledMark }}</p>
                    </template>
                  </el-table-column>
                </el-table>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="创建时间" prop="creatorTime">
                <p>{{ dataForm.creatorTime }}</p>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="创建用户" prop="creatorUserId">
                <p>{{ dataForm.creatorUserId }}</p>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="修改时间" prop="lastModifyTime">
                <p>{{ dataForm.lastModifyTime }}</p>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="修改用户" prop="lastModifyUserId">
                <p>{{ dataForm.lastModifyUserId }}</p>
              </el-form-item>
            </el-col>
          </template>
        </el-form>
      </el-row>
    </div>
  </transition>
</template>
<script>
import request from "@/utils/request";
import PrintBrowse from "@/components/print-browse";
import jsbos from "@/utils/jsbos";
export default {
  components: { PrintBrowse },
  props: [],
  data() {
    return {
      visible: false,
      loading: false,
      printBrowseVisible: false,
      printId: "",
      dataForm: {
        id: "",
        fullName: "",
        enCode: "",
        templateType: "",
        messageSource: "",
        sortCode: 0,
        enabledMark: 1,
        description: "",
        creatorTime: "",
        creatorUserId: "",
        lastModifyTime: "",
        lastModifyUserId: "",
        deleteTime: "",
        deleteUserId: "",
        sendTemplateList: [],
      },
      templateTypeOptions: [
        { fullName: "自定义模板", id: "0" },
        { fullName: "系统模板", id: "1" },
      ],

      templateIdOptions: [
        { fullName: "选项一", id: "1" },
        { fullName: "选项二", id: "2" },
      ],
      accountConfigIdOptions: [
        { fullName: "选项一", id: "1" },
        { fullName: "选项二", id: "2" },
      ],
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    dataInfo(dataAll) {
      let _dataAll = dataAll;
      for (let i = 0; i < _dataAll.sendTemplateList.length; i++) {
        var _list = _dataAll.sendTemplateList[i];
      }
      this.dataForm = _dataAll;
    },

    goBack() {
      this.$emit("refresh");
    },
    init(id) {
      this.dataForm.id = id || 0;
      this.visible = true;
      this.$nextTick(() => {
        if (this.dataForm.id) {
          this.loading = true;
          request({
            url: "/api/example/McMsgSend/detail/" + this.dataForm.id,
            method: "get",
          }).then((res) => {
            this.dataInfo(res.data);
            this.loading = false;
          });
        }
      });
    },
  },
};
</script>
